<template>
  <div>
    <h1>数据记录</h1>
  </div>
  <div>
    <!-- <div class="mb-4">
      <el-button type="info" @click="openDialog()">存钱宝</el-button>
      <el-button type="warning" @click="gotojiebei()">借呗</el-button>
      <el-button type="danger">我的待还</el-button>
    </div> -->
  </div>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="总资产" width="180" />
    <el-table-column prop="itemUsername" label="用户名" />
    <el-table-column prop="getName" label="借贷人姓名" />
    <el-table-column prop="xmName" label="项目名称" />
    <el-table-column prop="xmType" label="项目类型" />
    <el-table-column prop="getPrice" label="借贷金额" />
    <el-table-column prop="lx" label="年化利率" />
    <el-table-column prop="qx" label="借款期限" />
    <el-table-column prop="addTime" label="添加时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="info">查看</el-button>
        <!-- 修改按钮：仅当 reviewStatus 为 0（未初审）或 2（不通过）时显示 -->
        <el-button
          type="warning"
          @click="gotojiebei()"
          v-if="scope.row.reviewStatus === 0 || scope.row.reviewStatus === 2"
        >
          修改
        </el-button>
        <el-button type="danger" @click="openDialog(scope.row)">初审</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div>
    <el-dialog v-model="dialogFormVisible" title="审核" width="500">
      <el-form :model="ruleForm">
        <el-form-item label="项目类型" prop="itemStatus">
          <el-select v-model="ruleForm.itemStatus" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :value="item.id"
              :key="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="itemUsername">
          <el-input v-model="ruleForm.itemUsername" />
        </el-form-item>
        <el-form-item label="借贷人姓名" prop="getName">
          <el-input v-model="ruleForm.getName" />
        </el-form-item>
        <el-form-item label="项目名称" prop="xmName">
          <el-input v-model="ruleForm.xmName" />
        </el-form-item>
        <el-form-item label="借贷款金额" prop="getPrice">
          <el-input v-model="ruleForm.getPrice" />
        </el-form-item>
        <el-form-item label="借款期限" prop="qx">
          <el-input v-model="ruleForm.qx" />
        </el-form-item>

        <el-form-item label="添加时间" prop="addTime">
          <el-date-picker
            v-model="ruleForm.addTime"
            type="datetime"
            aria-label="请输入"
            placeholder="请输入"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleReview(2)">不通过</el-button>
          <el-button type="primary" @click="handleReview(1)"> 通过 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
const tableData = ref([]);
import { reactive, ref, onMounted } from "vue";
import {
  assetList,
  addItemList,
  itemList,
  listType,
  submitReview,
} from "../api/api";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";
const asslist = ref({});
let userId = ref("");
const listHH = () => {
  console.log("当前userId" + userId);
  itemList(userId).then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data;
    }
  });
};

import { Plus } from "@element-plus/icons-vue";
import type { UploadProps, UploadUserFile } from "element-plus";

const fileList = ref<UploadUserFile[]>([]);

/**
 * 通过 不通过
 */
// 弹窗底部按钮逻辑
const handleReview = (status: number) => {
  ruleForm.value.reviewStatus = status;
  //   status: 1-通过 / 2-不通过
  // 1. 调用后端接口提交初审结果（假设接口：submitReview）
  submitReview(ruleForm.value).then((res) => {
    if (res.data.code === 200) {
      // 2. 找到当前行，更新 reviewStatus
      const currentRow = tableData.value.find(
        (row) => row.id === ruleForm.value.id
      );
      if (currentRow) {
        currentRow.reviewStatus = status;
      }
      ElMessage.success("初审提交成功");
      dialogFormVisible.value = false;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const router = useRouter();
const ruleForm = ref<any>({
  addTime: "",
  getName: "",
  getPrice: null,
  id: null,
  itemStatus: null,
  itemUsername: "",
  lx: "",
  prodImageLists: [],
  qx: "",
  xmName: "",
  xmType: "",
  reviewStatus: "", // 新增初审状态字段
});

const headers = ref({
  token: sessionStorage.getItem("token"),
});

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const locationOptions = ["Home", "Company", "School"];

const gotojiebei = () => {
  router.push("/gotojiebei");
};

const openDialog = (any: any) => {
  Object.assign(ruleForm.value, any);
  dialogFormVisible.value = true;
};

const typeList = ref([]);
// 页面加载钩子函数
onMounted(() => {
  let u = sessionStorage.getItem("user");
  //   console.log(u);
  if (u != null) {
    let user = JSON.parse(u);
    console.log(user);
    userId = user.id;

    console.log("当前userId" + userId);
  }

  listType("").then((res) => {
    if (res.data.code == 200) {
      typeList.value = res.data.data;
    }
  });

  listHH();
});
</script>
